<script lang="tsx">
import { defineComponent, ref, computed } from 'vue'
import { ElButton, ElIcon, ElTooltip } from 'element-plus'
import oForm, { oFormProps } from 'oneui/form/factory.vue'
import { oSearch } from 'oneui/index'
import { oList } from 'oneui/index'
import type { iTableOptionsProps } from 'oneui/list/table.vue'
import type { SimpleKeyValueObject } from 'oneui/form/utils'
import { AddUserDialog } from '../popup/user'
import dataGithub, { options } from '../mock/data'
import { QuestionFilled } from '@element-plus/icons-vue'

export default defineComponent({
  components: { oForm, oSearch, oList, QuestionFilled },
  setup(props, context) {
    const headerOptions = computed(() => {
      return {
        title: '用户列表',
        columns: [
          {
            comtype: 'button',
            label: '添加用户',
            onClick() {
              AddUserDialog()
            }
          },
          {
            comtype: 'button',
            label: '清空记录'
          },
          {
            comtype: 'button',
            label: '变更分组'
          },
          {
            comtype: 'button',
            label: '变更分组'
          },
          {
            comtype: 'button',
            label: '发送用户消息'
          },
          {
            comtype: 'button',
            label: '用户消息回复'
          }
        ]
      }
    })
    const searchOptions = computed(() => {
      return {
        columns: [
          {
            prop: 'username',
            comtype: 'input',
            placeholder: '请输入用户账号',
            slots: {
              append() {
                return (
                  <ElTooltip
                    content={'用户账号,批量用英文逗号(,)分割'}
                    placement="top"
                  >
                    <ElIcon>
                      <QuestionFilled />
                    </ElIcon>
                  </ElTooltip>
                )
              }
            }
          },
          {
            prop: 'agent',
            placeholder: '请输入直属分组',
            comtype: 'input'
          },
          {
            prop: 'status',
            placeholder: '请输入在线状态',
            comtype: 'select',
            options: [
              { label: 'PC在线', value: 1 },
              { label: 'WAP在线', value: 2 },
              { label: 'APP在线', value: 3 }
            ]
          },
          {
            prop: 'accountstatus',
            placeholder: '请选择账号状态',
            comtype: 'select',
            options: [
              { label: '启用', value: 1 },
              { label: '停用', value: 2 }
            ]
          },
          {
            prop: 'tag',
            placeholder: '请选择用户标记',
            comtype: 'select',
            multiple: true,
            collapseTags: true,
            options: [
              { label: '正常', value: 1 },
              { label: '危险', value: 2 },
              { label: '致命', value: 3 },
              { label: '测试', value: 4 }
            ]
          },
          {
            prop: 'truename',
            placeholder: '请输入真实姓名',
            comtype: 'input'
          },
          {
            prop: 'usergroup',
            placeholder: '请选择用户分组',
            comtype: 'select',
            multiple: true,
            collapseTags: true,
            options: [
              { label: '分组1', value: 1 },
              { label: '分组2', value: 2 },
              { label: '分组3', value: 3 },
              { label: '分组4', value: 4 }
            ]
          },
          {
            prop: 'bankno',
            placeholder: '请输入身份ID号',
            comtype: 'input'
          },
          {
            prop: 'paytype',
            placeholder: '请选择支付类型',
            comtype: 'select',
            multiple: true,
            collapseTags: true,
            options: [
              { label: '分组1', value: 1 },
              { label: '分组2', value: 2 },
              { label: '分组3', value: 3 },
              { label: '分组4', value: 4 }
            ]
          },
          {
            prop: 'ip',
            placeholder: '请输入登录IP',
            comtype: 'input'
          },
          {
            prop: 'regip',
            placeholder: '请输入注册ip',
            comtype: 'input'
          },
          {
            prop: 'regtime',
            placeholder: '请输入注册时间',
            comtype: 'datepicker',
            type: 'daterange',
            startPlaceholder: '注册开始日期',
            endPlaceholder: '注册结束日期'
          }
        ]
      }
    })
    const tableOptions = computed(() => {
      return {
        columns: [
          {
            width: 70,
            fixed: 'left',
            type: 'selection',
            label: '全选'
          },
          // {
          //   width: 150,
          //   prop: 'login',
          //   label: '账号',
          //   align: 'center',
          //   // comtype: 'datepicker',
          //   type: 'primary',
          //   sortable: true,
          //   copy: true
          // },
          {
            prop: 'avatar_url',
            label: '照片',
            width: 80,
            align: 'center',
            comtype: 'picture',
            edit: (row: SimpleKeyValueObject) => {
              console.log('edit', row)
            }
          },
          {
            prop: 'received_events_url',
            label: '地址',
            sortable: true,
            width: 200,
            align: 'center',
            showTooltip: true,
            view: (row: SimpleKeyValueObject) => {
              console.log('view', row)
            },
            edit: (row: SimpleKeyValueObject) => {
              console.log('edit', row)
            }
          },
          {
            prop: 'type',
            label: '标签',
            width: 100,
            align: 'center',
            comtype: 'tag',
            edit: (row: SimpleKeyValueObject) => {
              console.log('edit', row)
            }
          },
          {
            prop: 'money',
            label: '金额',
            width: 100,
            align: 'center',
            comtype: 'money',
            edit: (row: SimpleKeyValueObject) => {
              console.log('edit', row)
            }
          },
          {
            width: 100,
            prop: 'html_url',
            comtype: 'upload',
            label: '上传大文件'
          },
          {
            width: 100,
            prop: 'do_url',
            comtype: 'download',
            label: '下载大文件'
          },
          {
            width: 110,
            prop: 'starred_url',
            comtype: 'switch',
            label: '开关',
            activeText: '开',
            inactiveText: '关'
          },
          {
            width: 240,
            prop: 'gravatar_id',
            comtype: 'slider',
            label: '声音',
            formItemStyle: { width: '220px' },
            showInput: true
          },
          {
            width: 90,
            prop: 'organizations_url',
            comtype: 'link',
            label: '声音',
            value: '跳转百度',
            onClick() {
              alert(1)
            }
          },
          {
            width: 130,
            prop: 'gender1',
            comtype: 'checkbox',
            label: '性别',
            options: [
              { label: '男', value: 1 },
              { label: '女', value: 2 }
            ],
            value: '女'
          },
          {
            comtype: 'button',
            label: '操作',
            value: '发送'
          }
        ],
        pageApiPromise: function (param) {
          console.log(param)
          return new Promise(resolve => {
            resolve({
              total: 1000,
              items: dataGithub.slice(
                (param.currentPage - 1) * param.pageSize,
                param.currentPage * param.pageSize
              )
            })
          })
        }
      } as iTableOptionsProps
    })
    return () => (
      <div>
        <oList
          headerOptions={headerOptions}
          searchOptions={searchOptions}
          tableOptions={tableOptions}
        />
      </div>
    )
  }
})
</script>
<style lang="scss" scoped></style>
